<template>
  <div class="typeNav clearfix">
    <div class="typeNav-left" @click="goSearch">
      <ul class="typeNavRow">
        <li v-for="item in list" :key="item.id">
          <a :data-name="item.name" :data-id1="item.id">{{ item.name }}</a>
          <div class="sort">
            <h1>{{ item.name }}</h1>
            <div class="sortOne" v-for="c2 in item.goods" :key="c2.name">
              <h1>{{ c2.name }}</h1>
              <div>
                <ul>
                  <li v-for="c3 in c2.goodsValue" :key="c3.id">
                    <a :data-name="c3.name" :data-id2="c3.id">{{ c3.name }}</a>
                  </li>
                </ul>
              </div>
            </div>
          </div>
        </li>
      </ul>
    </div>
    <div class="center">
      <!--banner轮播-->
      <div class="swiper-container" ref="mySwiper">
        <div class="swiper-wrapper">
          <div
            class="swiper-slide"
            v-for="imgItem in imgList"
            :key="imgItem.id"
          >
            <img class="img" :src="imgItem.img" />
          </div>
        </div>
        <div class="swiper-pagination"></div>
        <div class="swiper-button-prev"></div>
        <div class="swiper-button-next"></div>
      </div>
    </div>
    <div class="typeNav-right">
      <div class="aside-top">
        <h1>你好,欢迎来到1688</h1>
        <div><a href="#">填写我的采购需求</a></div>
        <span> 一键登录</span>
        <span>免费注册</span>
      </div>
      <div class="aside-foot">
        <div>
          <h1>火拼爆款</h1>
          <div>15天低价 每日更新</div>
          <img
            src="https://img.alicdn.com/imgextra/i1/O1CN01ZBEQu822e0GOC9jeL_!!6000000007144-2-tps-300-300.png"
          />
        </div>
        <div>
          <h1>火拼爆款</h1>
          <div>15天低价 每日更新</div>
          <img
            src="https://img.alicdn.com/imgextra/i1/O1CN01ZBEQu822e0GOC9jeL_!!6000000007144-2-tps-300-300.png"
          />
        </div>
      </div>
    </div>
  </div>
</template>

<script>
import Swiper from "swiper";
import "swiper/css/swiper.min.css";
import { swiperImg } from "@/api/index";
import { mapState } from "vuex";
export default {
  name: "TypeNav",
  data() {
    return {
      imgList: [],
    };
  },
  computed: {
    ...mapState({
      list: (state) => state.home.list,
    }),
  },
  methods: {
    // 1.获取轮播图图片
    async getImgList() {
      this.imgList = await swiperImg();
    },
    // 2.获取三级列表数据
    getListInfo() {
      this.$store.dispatch("getList");
    },
    // 3.点击三级分类跳转到搜索页面
    goSearch(e) {
      const dataset = e.target.dataset;
      const { name, id1, id2 } = dataset;
      // 我们只要点击a标签时才跳转，所以如果name有值就说明点的一定是a标签
      if (name) {
        let location = {
          name: "product",
        };
        location.query = {
          name,
          id1,
          id2,
        };
        this.$router.push(location);
      }
    },
  },
  mounted() {
    this.getImgList();
    this.getListInfo();
  },
  watch: {
    imgList: {
      handler(newVal, oldVal) {
        // watch + $nextTick watch能保证数据变了 $nextTick能保证这次页面更新了
        //等到这次页面更新完成 才会执行里面的回调函数
        this.$nextTick(() => {
          new Swiper(this.$refs.mySwiper, {
            loop: true, //无缝轮播
            speed: 2000, //切换时间  到下一张所需要的时间
            spaceBetween: 30, //每屏间隔大小
            autoplay: {
              //自动轮播
              delay: 2000, //延迟时间   当前屏显示多久 去下一屏
              disableOnInteraction: false, //控制鼠标操作之后 还自动轮播不
            },
            pagination: {
              el: ".swiper-pagination", //获取小圆点的容器
              clickable: true, //是否可以点击小圆点
            },
            navigation: {
              //获取左右按钮容器
              nextEl: ".swiper-button-next",
              prevEl: ".swiper-button-prev",
            },
          });
        });
      },
    },
  },
};
</script>

<style lang="less" scoped>
.typeNav {
  width: 1200px;
  margin: 0 auto;
}
// 商品内容的左侧样式
.typeNav-left {
  float: left;
  width: 220px;
  height: 384px;
  background-color: #f2f2f2;
  position: relative;
  .typeNavRow li:hover {
    background-color: pink;
  }
  .typeNavRow li:hover .sort {
    display: block;
    background-color: #fff;
  }

  .sort {
    position: absolute;
    border: 2px solid rgb(221, 114, 114);
    left: 100%;
    top: 0;
    width: 980px;
    height: 450px;
    // background-color: pink;
    z-index: 999;
    display: none;
    padding: 15px;
    h1 {
      margin: 10px 15px;
      font-size: 20px;
      color: rgb(232, 28, 28);
    }
    .sortOne,
    .sortTwo,
    .sortThree,
    .sortFour {
      float: left;
      margin: 0 15px;
      margin-top: 10px;
      width: 460px;
      height: 190px;
      // background-color: skyblue;
      h1 {
        color: rgb(45, 38, 38);
      }
      div {
        border-top: 2px solid rgb(225, 142, 142);
        padding: 4px 10px 10px 0;
        width: 460px;
        height: 160;
        ul li a {
          float: left;
          padding: 0 10px 10px 0;
        }
      }
    }
  }
  .typeNavRow li a {
    display: inline-block;
    padding: 12px 40px;
    font-size: 15px;
    text-decoration: none;
  }
}
// 商品内容的中间样式
.center {
  margin-left: 15px;
  float: left;
  width: 600px;
  height: 384px;
}
.img {
  width: 600px;
  height: 384px;
}
// 商品内容的右侧样式
.typeNav-right {
  float: right;
  width: 348px;
  height: 384px;
  background-color: #f2f2f2;
  .aside-top {
    overflow: hidden;
    width: 348px;
    height: 132px;
    background-color: #f0e5da;
    text-align: center;
    font-weight: 400;
    h1 {
      margin: 10px 0 10px 0;
    }
    div a {
      color: red;
    }
    span {
      display: inline-block;
      margin-top: 15px;
      width: 152px;
      height: 32px;
      line-height: 32px;
      font-size: 16px;
      border-radius: 5px;
    }
    span:first-of-type {
      background-color: red;
      color: #fff;
      text-align: center;
      margin-right: 5px;
    }
    span:last-of-type {
      border: 1px solid red;
      background-color: #fff;
      color: red;
    }
  }
  .aside-foot {
    padding: 16px;
    text-align: center;
    div {
      width: 150px;
    }
    div:first-of-type {
      float: left;
    }
    div:last-of-type {
      float: right;
    }
    div h1 {
      margin: 10px 0;
      color: #ff5400;
    }
    div div {
      color: #666;
    }
    div img {
      display: inline-block;
      padding-top: 15px;
      width: 150px;
      height: 150px;
    }
  }
}
// 牛头的图片 https://img.alicdn.com/imgextra/i1/O1CN01hK1DRp1P4wwhobTES_!!6000000001788-2-tps-200-200.png
</style>
